<template>
    <div>
        <div class="modal-content">
            <el-form :model="loginForm" status-icon ref="ruleForm" class="col-right">
                <div class="modal-header">
                    <div style="font-size: 18px;color:#5ecfba;float: left;line-height: 36px;margin-left: 6px;">{{this.modalTitle}}</div>
                    <div style="float: right;">
                        <el-button size="small" @click="changelogin">{{this.loginName}}</el-button>
                    </div>
                    <div style="clear: right"></div>
                </div>

                <!--账号密码登陆-->
                <div class="modal-body" v-show="loginStat.stat">
                    <el-form-item>
                        <el-input v-model="loginForm.userName" autocomplete="off" placeholder="请输入账号 6 - 10 位字母"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input type="password" v-model="loginForm.userPassword" placeholder="请输入密码 6 - 10 位字母数字" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div>
                            <el-input style="width: 150px;float: left" type="password" v-model="loginForm.validateCode" placeholder="请输入右侧验证码" autocomplete="off"></el-input>
                            <div class="validate-code-box" @click="changeValidateCode">{{this.validateCode}}</div>
                        </div>
                        <div>
                            <div style="font-size: 12px;float: left;">还没有账号?  <span class="register-link" @click="registerModal">立即注册</span></div>
                            <div style="font-size: 12px;float: right"><span class="forget-link" @click="forgetModal">{{ this.forgetStr }}</span></div>
                        </div>
                    </el-form-item>
                </div>

                <!--手机验证码登陆-->
                <div class="modal-body" v-show="telLoginStat.stat">
                    <el-form-item>
                        <el-input v-model="loginForm.telNum" autocomplete="off" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div>
                            <el-input style="width: 150px;float: left" type="password" v-model="loginForm.validateCode" placeholder="请输入短信验证码" autocomplete="off"></el-input>
                            <div class="validate-code-box" @click="telVDCodeClick" v-if="checkVdStat" style="letter-spacing:8px;color: blue"> 获取短信 </div>
                            <div class="validate-code-box2" v-if="!checkVdStat">倒计时 <b style="color: red;letter-spacing: 2px">{{ this.checkvdNum }}</b> 秒</div>
                        </div>
                        <div>
                            <div style="font-size: 12px;float: left;">还没有账号?  <span class="register-link" @click="registerModal">立即注册</span></div>
                            <div style="font-size: 12px;float: right"><span class="forget-link" @click="forgetModal">{{ this.forgetStr }}</span></div>
                        </div>
                    </el-form-item>

                </div>

                <!--注册-->
                <div class="modal-body" v-show="registerStat.stat">
                    <el-form-item>
                        <el-input v-model="loginForm.userName" autocomplete="off" placeholder="请输入账号 6 - 10 位字母"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input type="password" v-model="loginForm.userPassword" autocomplete="off" placeholder="请输入密码 6 - 10 位字母数字"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input type="password" v-model="loginForm.userPasswordAgain" autocomplete="off" placeholder="请再次输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="loginForm.telNum" autocomplete="off" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div>
                            <el-input style="width: 150px;float: left" type="password" v-model="loginForm.validateCode" placeholder="请输入短信验证码" autocomplete="off"></el-input>
                            <div class="validate-code-box" @click="telVDCodeClick" v-if="checkVdStat" style="letter-spacing:8px;color: blue"> 获取短信 </div>
                            <div class="validate-code-box2" v-if="!checkVdStat">倒计时 <b style="color: red;letter-spacing: 2px">{{ this.checkvdNum }}</b> 秒</div>
                        </div>
                        <div>
                            <div style="font-size: 12px;float: left;">还没有账号?  <span class="register-link" @click="registerModal">立即注册</span></div>
                            <div style="font-size: 12px;float: right"><span class="forget-link" @click="forgetModal">{{ this.forgetStr }}</span></div>
                        </div>
                    </el-form-item>
                </div>

                <!--忘记密码-->
                <div class="modal-body" v-show="forgetStat.stat">
                    <el-form-item>
                        <el-input v-model="loginForm.telNum" autocomplete="off" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input type="password" v-model="loginForm.userPassword" autocomplete="off" placeholder="请输入更改密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div>
                            <el-input style="width: 150px;float: left" type="password" v-model="loginForm.validateCode" placeholder="请输入短信验证码" autocomplete="off"></el-input>
                            <div class="validate-code-box" @click="telVDCodeClick" v-if="checkVdStat" style="letter-spacing:8px;color: blue"> 获取短信 </div>
                            <div class="validate-code-box2" v-if="!checkVdStat">倒计时 <b style="color: red;letter-spacing: 2px">{{ this.checkvdNum }}</b> 秒</div>
                        </div>
                        <div>
                            <div style="font-size: 12px;float: left;">还没有账号?  <span class="register-link" @click="registerModal">立即注册</span></div>
                            <div style="font-size: 12px;float: right"><span class="forget-link" @click="forgetModal">{{ this.forgetStr }}</span></div>
                        </div>
                    </el-form-item>
                </div>

                <div class="modal-footer">
                    <el-form-item style="margin-top: -10px">
                        <el-button type="primary" @click="login()" style="width: 100%">{{ this.btnName}}</el-button>
                        <!--                        <el-button @click="resetForm('loginForm')">重置</el-button>-->
                    </el-form-item>
                </div>
            </el-form>
            <div style="clear: both"></div>
        </div>
    </div>
</template>

<!--<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js">-->
<!--</script>-->
<!--<script>-->
<!--    let obj = new WxLogin({-->
<!--        self_redirect:true,-->
<!--        id:"login_container",-->
<!--        appid: "wxe5d338b9752f41b0",-->
<!--        scope: "snsapi_login",-->
<!--        redirect_uri: "",-->
<!--        state: "",-->
<!--        style: "",-->
<!--        href: ""-->
<!--    });-->
<!--</script>-->

<script>
    export default {
        name: "login",
        data(){
            return {
                btnName: '登陆',
                forgetStr: '密码找回或修改?',
                loginName: '手机验证码登陆',
                loginForm: {
                    stat: 'user',
                    // stat: 'register',
                    userName: '',
                    userPassword: '',
                    userPasswordAgain: '',
                    validateCode: '',
                    telNum: ''
                },
                userToken: '231',
                modalTitle: '账号登陆',
                loginStat: {
                    stat: true,
                    // stat: false,
                    title: '登陆'
                },
                telLoginStat: {
                    stat: false,
                    title: '手机登陆'
                },
                registerStat: {
                    stat: false,
                    // stat: true,
                    title: '注册'
                },
                forgetStat: {
                    stat: false,
                    title: '密码找回'
                },
                // 验证码
                validateCode: '点击获取',

                // 短信验证码显示
                checkVdStat: !localStorage.getItem('telCheckStat'),

                // 获取倒计时时间
                checkvdNum: 30,

                //倒计时时间钟
                checkvdClock: null
            }
        },
        methods: {
            userMsgAlert() {
                let _this = this
                setTimeout(function () {
                    _this.$notify({
                        title: '用户格式',
                        message: `
                    用户名格式为大小写字母 长度为 6 - 10位
                    密码格式需为字母或数字 长度为 6 - 10位请按照格式填写
                    `,
                        position: 'top-left'
                    });
                }, 1000)
            },
            validateUserInfo(stat){
                let _this = this.loginForm
                let msg   = ''
                switch (stat) {
                    case 'user':
                        if (_this.userName == '' || _this.userName == '') {
                            msg = '用户名和密码不得为空'
                        } else if (_this.validateCode == '') {
                            msg = '验证码不得为空'
                        } else if (_this.userName.length > 10 || _this.userPassword.length > 10) {
                            msg = '用户名或密码长度过长 '
                        } else if (_this.userName.length < 6 || _this.userPassword.length < 6) {
                            msg = '用户名或密码长度过小'
                        } else if (!/^[a-zA-Z]+$/.test(_this.userName)) {
                            msg = '用户名必须为字母'
                        } else if (!/^[a-zA-Z0-9]+$/.test(_this.userPassword)) {
                            msg = '密码只能为数字或密码'
                        }
                        else {
                            msg = 'OK'
                        }
                        break;
                    case 'tel':
                        if (_this.telNum == '' || _this.telNum.length != 11) {
                            msg = '手机号输入格式有误'
                        }
                        else {
                            msg = 'OK'
                        }
                        break
                    case 'passwordForget':
                        if (_this.telNum == '' || _this.telNum.length != 11) {
                            msg = '手机号输入格式有误'
                        } else if (_this.userPassword == '') {
                            msg = '密码不得为空'
                        } else if (!/^[a-zA-Z0-9]+$/.test(_this.userPassword)) {
                            msg = '密码只能为数字或密码'
                        } else if (_this.userPassword.length < 6 || _this.userPassword.length > 10) {
                            msg = '密码长度有误'
                        }
                        else {
                            msg = 'OK'
                        }
                        break
                    case 'userVDCode':
                        if (_this.validateCode != this.validateCode) {
                            msg = '验证码有误请重新输入'
                        } else {
                            msg = 'OK'
                        }
                        break
                    case 'telVDCode':
                        if (_this.validateCode == '') {
                            msg = '短信验证码不得为空'
                        } else {
                            msg = 'OK'
                        }
                        break
                    case 'passwordForgetVDCode':
                        if (_this.validateCode == '') {
                            msg = '短信验证码不得为空'
                        } else {
                            msg = 'OK'
                        }
                        break
                    case 'register':
                        if (_this.userName == '' || _this.userName == '') {
                            msg = '用户名和密码不得为空'
                        } else if (_this.userName.length > 10 || _this.userPassword.length > 10) {
                            msg = '用户名或密码长度过长 '
                        } else if (_this.userName.length < 6 || _this.userPassword.length < 6) {
                            msg = '用户名或密码长度过小'
                        } else if (!/^[a-zA-Z]+$/.test(_this.userName)) {
                            msg = '用户名必须为字母'
                        } else if (!/^[a-zA-Z0-9]+$/.test(_this.userPassword)) {
                            msg = '密码只能为数字或密码'
                        } else if (_this.userPassword != _this.userPasswordAgain) {
                            msg = '两次密码不一致请重新输入'
                        } else if (_this.telNum.length != 11 || _this.telNum == '') {
                            msg = '手机号输入格式有误'
                        }
                        else {
                            msg = 'OK'
                        }
                        break
                    case 'registerVDCode':
                        if (_this.validateCode == '') {
                            msg = '验证码不得为空'
                        } else {
                            msg = 'OK'
                        }
                }
                return msg
            },
            telVDClock() {
                let _this = this
                if (localStorage.getItem('telCheckStat')) {
                    this.checkvdClock = setInterval(function () {
                        _this.checkvdNum -= 1
                        if (_this.checkvdNum < 1) {
                            localStorage.removeItem('telCheckStat')
                            _this.checkVdStat = true
                            _this.checkvdNum = 30
                            clearInterval(_this.checkvdClock)
                        }
                    }, 1000)
                }
            },
            telVDCodeClick() {
                    console.log(this.loginForm.stat);
                    switch (this.loginForm.stat) {
                        case 'passwordForget':
                            if (this.validateUserInfo('passwordForget') != 'OK') {
                                alert(this.validateUserInfo('passwordForget'))
                            } else {
                                this.getTelCode()
                            }
                            break;
                        case 'tel':
                            console.log(11112221);
                            console.log(this.loginForm);
                            if (this.validateUserInfo('tel') != 'OK') {
                                alert(this.validateUserInfo('tel'))
                            } else {
                                this.getTelCode()
                            }
                            break;
                        case 'register':
                            if (this.validateUserInfo('register') != 'OK') {
                                alert(this.validateUserInfo('register'))
                            } else {
                                this.getTelCode()
                            }
                    }
            },
            getTelCode () {
                localStorage.setItem('telCheckStat', 'true')
                this.checkVdStat = !localStorage.getItem('telCheckStat')
                this.telVDClock()
                this.api.Login.getTelCode(this.loginForm).then( res => {
                    console.log(res);
                    if (res.data.code != '0000') {
                        alert(res.data.msg)
                    }
                }).catch( err => {
                    console.log(err);
                    this.serverError()
                })
            },
            changeLoginName(loginStat, telLoginStat, registerStat, forgetStat, loginName, modalTitle, loginFormstat, btnName) {
                this.loginStat.stat = loginStat
                this.telLoginStat.stat = telLoginStat
                this.registerStat.stat = registerStat
                this.forgetStat.stat = forgetStat
                this.loginName = loginName
                this.modalTitle = modalTitle
                this.validateCode = '点击获取'
                for (let i in this.loginForm) {
                    this.loginForm[i] = ''
                }
                this.loginForm.stat = loginFormstat
                this.btnName = btnName
            },
            changelogin() {
                if (this.loginName == '手机验证码登陆') {
                    this.changeLoginName(false, true, false, false, '账号登陆', '手机验证码登陆', 'tel', '登陆')
                } else {
                    this.changeLoginName(true, false, false, false,'手机验证码登陆', '账号登录', 'user', '登陆')
                }
            },
            registerModal() {
                this.changeLoginName(false, false, true, false,'账号登陆', '注册', 'register', '注册')

            },
            forgetModal() {
                this.changeLoginName(false, false, false, true,'账号登陆', '密码找回', 'passwordForget', '密码找回或修改')
            },
            login() {
                switch (this.loginForm.stat) {
                    case 'user':
                        if (this.validateUserInfo('user') != 'OK') {
                            alert(this.validateUserInfo('user'))
                        } else if (this.validateUserInfo('userVDCode') != 'OK') {
                            alert(this.validateUserInfo('userVDCode'))
                            this.changeValidateCode()
                        }
                        else {
                            this.postLoginData()
                        }
                        break
                    case 'tel':
                        if (this.validateUserInfo('tel') != 'OK') {
                            alert(this.validateUserInfo('tel'))
                        } else if (this.validateUserInfo('telVDCode') != 'OK') {
                            alert(this.validateUserInfo('telVDCode'))
                        }
                        else {
                            this.postLoginData()
                        }
                        break
                    case 'register':
                        if (this.validateUserInfo('register') != 'OK') {
                            alert(this.validateUserInfo('register'))
                        } else if (this.validateUserInfo('registerVDCode') != 'OK') {
                            alert(this.validateUserInfo('registerVDCode'))
                        } else {
                            this.postRegister()
                        }
                        break
                    case 'passwordForget':
                        if (this.validateUserInfo('passwordForget') != 'OK') {
                            alert(this.validateUserInfo('passwordForget'))
                        } else if (this.validateUserInfo('passwordForgetVDCode') != 'OK') {
                            alert(this.validateUserInfo('passwordForgetVDCode'))
                        }
                        else {
                            this.postPasswordForget()
                        }
                        break
                }
            },
            postRegister () {
                this.api.Login.Register(this.loginForm).then( res => {
                    console.log(res);
                    alert(res.data.msg)
                }).catch( err => {
                    console.log(err);
                    this.serverError()
                })
            },
            postLoginData (){
                this.cusMark();
                console.log(this.loginForm.stat);
                this.api.Login.login(this.loginForm).then( res => {
                    if (res.data.code === '0000') {
                        this.cusMark(res);
                        console.log(res);
                        localStorage.setItem('userToken', res.data.data.userToken)
                        localStorage.setItem('userName', res.data.data.userName)
                        if (!this.$route.query.redirect || this.$route.query.redirect == '/login') {
                            this.goIndex('/home')
                        } else {
                            this.$router.push(this.$route.query.redirect);
                        }
                    } else {
                        this.cusMark(true);
                        alert (res.data.msg)
                        this.changeValidateCode()
                    }
                }).catch( err => {
                    this.cusMark(true);
                    console.log(err);
                    this.serverError()
                })
            },
            postPasswordForget () {
                this.cusMark();
                this.api.Login.passwordForget(this.loginForm).then( res => {
                    this.cusMark(res);
                    console.log(res);
                    alert(res.data.msg)
                }).catch( err => {
                    this.cusMark(true);
                    console.log(err);
                    this.serverError()
                })
            },
            changeValidateCode() {
                this.validateCode = Math.round(Math.random()*10000).toString().padStart(4, '0')
            },
        },
        mounted() {
            this.enterClick('login')
            this.telVDClock()
            this.userMsgAlert()
        }
    }
</script>

<style>
    html{
        height: 100%!important;
        background: url("../assets/image/loginBg.jpg") no-repeat;
        background-size: cover;
    }
</style>
<style scoped lang="scss">
    $height: 300px;
    .modal-content{
        position: relative;
        width: 550px;
        /*margin: 20% auto;*/
        top: 200px;
        margin-left: auto;
        margin-right: auto;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border: 1px solid #999;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: 6px;
        outline: 0;
        -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
        box-shadow: 0 3px 12px rgba(0,0,0,.6);
        background: url("../assets/image/data.jpg") no-repeat -140px;
        background-size: cover;
    }
    .col-right {
        width: 300px;
        color: #b2b2b2;
        float: right;
        box-sizing: border-box;
        background-color: white;
    }
    .col-left{
        float: left;
        width: 250px;
        box-sizing: border-box;
    }
    .modal-header{
        border-bottom: 1px solid #cccccc;
        padding: 15px;
        line-height: 32px;
    }
    .modal-body{
        margin-top: 20px;
        padding: 0 20px;
    }
    .register-link{
        margin-left: 10px;
        color: #ff9600;
        cursor: pointer;
    }
    .forget-link{
        @extend .register-link;
        color: #5ecfba;
        margin-right: 5px;
    }
    .validate-code-box{
        width: 90px;
        height: 40px;
        float: right;
        letter-spacing: 8px;
        color: red;
        line-height: 40px;
        cursor: pointer;
    }
    .validate-code-box2{
        @extend .validate-code-box;
        letter-spacing: 0;
        color: black;
    }
    .modal-footer{
        @extend .modal-body
    }
</style>